<template>
	<div id='detail'>
		<header1></header1>
			<div class="navbar_con">
					<div class="navbar">
						<div class="sub_menu_con fl">
							<h1 class="fl">商品分类</h1>
							<ul class="sub_menu">			
								<li>
									<div class="level1">
										<a href="#">手机</a><a href="#">运营商</a><a href="#">数码</a>
									</div>
									
								</li>
								
							</ul>
						</div>		
			
						<ul class="navlist fl">
							<li><a href="">首页</a></li>
							<li class="interval">|</li>
							<li><a href="">真划算</a></li>
							<li class="interval">|</li>
							<li><a href="">抽奖</a></li>
						</ul>
					</div>
				</div>
	
		<div class="breadcrumb">
			<a href="#">全部分类</a>
			<span>></span>
			<a href="#">笔记本</a>
			<span>></span>
			<a href="#">mac电脑</a>
		</div>
	
		<div class="goods_detail_con clearfix">
			<div class="goods_detail_pic fl"><img :src="goods.picture"></div>
			<div class="goods_detail_list fr">
				<div id='showcoll'>
					<button @click="collection(goods.id,1)">收藏</button>
				</div>
				<h3>{{goods.name}}</h3>
			<p>{{goods.content}}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{goods.price}}</em></span>
				<a href="javascript:;" class="goods_judge">449人评价</a>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1" v-model="number">
					<a href="javascript:;" class="add fr" @click="add()">+</a>
					<a href="javascript:;" class="minus fr" @click="del()">-</a>	
				</div> 
			</div>
			<div class="type_select">
				<label>屏幕尺寸:</label>
				<a href="javascript:;" class="select">{{goods.size}}</a>
				
			</div>
			<div class="type_select">
				<label>颜色:</label>
				<a href="javascript:;" class="select">{{goods.color}}</a>
				
			</div>
			<div class="type_select">
				<label>版本:</label>
				<a href="javascript:;" class="select">{{goods.version}}</a>
			</div>
			<div class="total">总价：<em>{{all_money}}</em></div>
				<div class="operate_btn">
					<a href="javascript:;" class="buy_btn">立即购买</a>
					<button @click='add_cart()' class="add_cart" id="add_cart">加入购物车</button>				
				</div>
			</div>
		</div>
	
		<div class="main_wrap clearfix">
			<div class="l_wrap fl clearfix">
				<div class="new_goods">
					<h3>热销排行</h3>
					<ul>
						<li>
							<a href="#"><img src="../../static/images/goods/goods001.jpg"></a>
							<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
							<div class="prize">￥3.90</div>
						</li>
						<li>
							<a href="#"><img src="../../static/images/goods/goods002.jpg"></a>
							<h4><a href="#">360手机 N6 Pro 全网通 6GB+128GB 极夜黑</a></h4>
							<div class="prize">￥16.80</div>
						</li>
					</ul>
				</div>
			</div>
	
			<div class="r_wrap fr clearfix">
				<ul class="detail_tab clearfix">
					<li class="active">商品详情</li>
					<li>规格与包装</li>
					<li>商品评价(2)</li>
					<li>售后服务</li>
				</ul>
				<div class="tab_content current">
					<dl>
						<dt>商品详情：</dt>
						<dd v-html="goods.detail">{{goods.detail}}</dd>
					</dl>
				</div>
				<div class="tab_content">
					<dl>
						<dt>规格与包装：</dt>
						<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>
					</dl>
				</div>
				<div class="tab_content">
					<ul class="judge_list_con">
						<li class="judge_list fl">
							<div class="user_info fl">
								<img src="../../static/images/cat.jpg">
								<b>潇***啼</b>
							</div>
							<div class="judge_info fl">
								<div class="stars_five"></div>
								<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
							</div>
						</li>
						<li class="judge_list fl">
							<div class="user_info fl">
								<img src="../../static/images/cat.jpg">
								<b>潇***啼</b>
							</div>
							<div class="judge_info fl">
								<div class="stars_four"></div>
								<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
							</div>
						</li>
						<li class="judge_list fl">
							<div class="user_info fl">
								<img src="../../static/images/cat.jpg">
								<b>潇***啼</b>
							</div>
							<div class="judge_info fl">
								<div class="stars_four"></div>
								<div class="judge_detail">派送非常快，第二天上午就收到。2天使用初步总结，前一部手机也是华为P9plus.MATE10pro包装原封未拆精致大气。拆开后第一眼就看到宝石蓝的手机，非常惊艳；然后就是配件一应俱全。开机各方面设置，把通讯录、短信等同步好，同品牌手机同步很快。和P9plus一样的后置指纹识别很方便。录制指纹容易，解锁非常快，秒开！屏幕完好，默认分辨率显示效果很好。</div>
							</div>
						</li>				
					</ul>
				</div>
				<div class="tab_content">
					<dl>
						<dt>售后服务：</dt>
						<dd>它纤薄如刃，轻盈如羽，却又比以往速度更快、性能更强大。它为你展现的，是迄今最明亮、最多彩的 Mac 笔记本显示屏。它更配备了触控栏，一个内置于键盘的玻璃面多点触控条，让你能在需要时快速取用各种工具。MacBook Pro 是对我们突破性理念的一场出色演绎，而它，也正期待着演绎你的奇思妙想。 </dd>
					</dl>
				</div>
	
	
	
			</div>
		</div>
		<footer1></footer1>

	</div>
	
</template>
<script>
import Header1 from '@/components/Header'
import Footer1 from '@/components/Footer'
import {select_goods_detail,create_cart}  from './axios_api/api.js'
export default{
	name:'detail2',
	data:function(){
		return{
			number:1,
			goods:{'name':'abc','price':100}
		}
	},
	components:{
		header1:Header1,
		footer1:Footer1
	},
	methods:{
		collection(){
			
		},
		add(){
			this.number += 1
			this.all_money = this.goods.price * this.number
		},
		del(){
			if(this.number==1){
				alert("错误")
			}else{
				this.number-=1
				this.all_money = this.goods.price * this.number
			}
		},
		buy(){

		},
		add_cart(){
			var goods_id = this.$route.params.id
			var data  = {"goods_id":goods_id,"number":this.number}
			create_cart(data)
			.then(res=>{
				console.log(res)
			})

		},
		get_goods_info(){
			var id = this.$route.params.id
			console.log(id)
			var data = {"id":id}
			
			select_goods_detail(data)
			.then(res=>{
				console.log(res)
				this.goods = res
				this.all_money = res.price
			})
		},
	},
	created(){
		this.get_goods_info()
	}
	  
}


</script>
		